<template>
  <div class="avatar">
    <div class='avatarWrap' @mouseover="showBg=true" @mouseleave="showBg=false">
      <div class="bg" v-show='!avatar'></div>
      <input type="file" class="input-file" name="avatar"
             ref="avatarInput" @change="changeImage($event)" accept="image/gif,image/jpeg,image/jpg,image/png">
      <img :src="avatar||''" alt=""
           class='imgShow' name="avatar">
    </div>
    <div
      class="next"
      :class="avatar? 'activeNext':''"
      @click='_handleUpload'>NEXT
    </div>
    <!--<div class="text" @click="upload" v-if="file">确定上传</div>-->
  </div>
</template>
<script>
  import api from '../../plugins/api'
  import { Toast } from 'mint-ui'

  const Cookie = process.browser ? require('js-cookie') : undefined
  export default {
    name: 'upload',
    data() {
      return {
        avatar: '',
        file: '',
        showBg: false
      }
    },
    props: ['uploadType'],
    created() {
      // this.avatar = this.imgUrl
    },
    methods: {
      changeImage: function(e) {
        let file = e.target.files[0]
        this.file = file
        console.log(this.file)
        let reader = new FileReader()
        let that = this
        reader.readAsDataURL(file)
        reader.onload = function(e) {
          that.avatar = this.result
          console.log(this.result)
        }
      },
      async _handleUpload() {
        if (this.avatar) {
          const parmas = {
            sid: Cookie.get('sid'),
            avatar: this.avatar
          }
          const res = await api.setChangeInfo(parmas)
          console.log(res)
          if (res.status == 0) {
            // this.$router.push({ path: '/login/3' })
          } else {
            Toast(res.info)
          }

        }else {
          Toast('Choose your avatar!')
        }
      }
    }
  }
</script>
<style lang="scss" scope>
  .avatar {
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .avatarWrap {
      width: 300px;
      height: 300px;
      display: flex;
      margin: 200px 0 440px 0;
      position: relative;

      .input-file {
        width: 300px;
        height: 300px;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        cursor: pointer;
      }

      .bg {
        width: 80px;
        height: 80px;
        background: url("../../assets/images/18.png") no-repeat center;
        -webkit-background-size: cover;
        background-size: cover;
        text-align: center;
        cursor: pointer;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-40px, -40px);

      }

      .imgShow {
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: rgba(249, 249, 249, 1);
        border: 6px solid rgba(31, 204, 192, 1);
        box-sizing: border-box;
      }
    }

  }

  .next {
    width: 600px;
    height: 100px;
    background: rgba(212, 215, 215, 1);
    box-shadow: 0px 17px 40px -9px rgba(174, 174, 174, 0.3);
    border-radius: 58px;
    line-height: 100px;
    text-align: center;
    margin-bottom: 54px;

    &.activeNext {
      background: rgba(31, 204, 192, 1);
    }
  }
</style>
